import QtQuick 1.1
import com.nokia.meego 1.0
import "qbconst.js" as Util
import "getUrls.js" as Geturl

Page {
    id: imagePage
    property string postId
    property string imageId
    tools: tool4articl
    onImageIdChanged: if(imageId!="")
                          mainLoader.sourceComponent=mainComp

    Loader {
        id: mainLoader
        anchors.fill: parent
        sourceComponent: undefined
    }

    ToolBarLayout {
          id: tool4articl
          visible: true
          ToolIcon {
              platformIconId: "toolbar-back"

              onClicked:  appWindow.pageStack.pop();
          }
      }
    Component {
        id: mainComp
        Flickable {
            id: imageFlickable
            clip: true
            contentWidth: Math.max(imagePage.width, viewImage.width*viewImage.scale)
            contentHeight: Math.max(imagePage.height, viewImage.height*viewImage.scale)
            Image {
                id: thumbImage
                width: imagePage.width; height: imagePage.height
                source: Util.getImageUrl("small", imageId)
                fillMode: Image.PreserveAspectFit
                visible: status == Image.Ready
                ProgressBar {
                    anchors {
                    horizontalCenter: thumbImage.horizontalCenter;
                    bottom: thumbImage.bottom; bottomMargin: 20 }
                    width: window.width/2;
                    value: viewImage.progress
                }
            }
            Image {
                id: viewImage
                property double ratio: Math.max(sourceSize.width/width,sourceSize.height/height,2)
                width: imagePage.width; height: imagePage.height
                anchors { left: parent.left; leftMargin: width/2*(scale-1); top: parent.top; topMargin: height/2*(scale-1) }
                fillMode: Image.PreserveAspectFit
                source: Util.getImageUrl("large", imagePage.imageId)
                Behavior on scale {
                    NumberAnimation { duration: 200; onRunningChanged: if(!running)releaseAnchor() }
                }
                onScaleChanged: {
                    imageFlickable.contentItem.anchors.centerIn = imageFlickable
                }
                onStatusChanged: {
                    if(status==Image.Error)
                        viewImage.source = Geturl.getimageurl(postId, imageId)
                    if(status==Image.Ready)
                        thumbImage.source = ""
                }
            }
            PinchArea {
                anchors.fill: parent
                enabled: viewImage.status==Image.Ready
                pinch.target: viewImage
                pinch.minimumScale: 0.7
                pinch.maximumScale: viewImage.ratio+1
                onPinchFinished: {
                    if(viewImage.scale>viewImage.ratio)viewImage.scale=viewImage.ratio
                    if(viewImage.scale<1)viewImage.scale=1
                    imageFlickable.releaseAnchor()
                }
            }
            MouseArea {
                anchors.fill: parent
                enabled: viewImage.status==Image.Ready
                onDoubleClicked: {
                    if(viewImage.scale>1)viewImage.scale=1
                    else viewImage.scale = viewImage.ratio
                }
            }
            function releaseAnchor(){
                var x = imageFlickable.contentItem.x; var y = imageFlickable.contentItem.y
                imageFlickable.contentItem.anchors.centerIn = undefined
                imageFlickable.contentX = -x; imageFlickable.contentY = -y
            }
        }
    }
}
